<template>
  <div class="login">
    <div class="conent">
      <a-form
        :model="formState"
        name="basic"
        :label-col="{ span: 4 }"
        :wrapper-col="{ span: 18 }"
        autocomplete="off"
        @finish="onFinish"
      >
        <a-form-item
          label="账号"
          name="username"
          :rules="[{ required: false, message: '请输入账号！' }]"
        >
          <a-input v-model:value="formState.username" />
        </a-form-item>

        <a-form-item
          label="密码"
          name="password"
          :rules="[{ required: false, message: '请输入密码!' }]"
        >
          <a-input-password v-model:value="formState.password" />
        </a-form-item>

        <a-form-item name="remember" :wrapper-col="{ offset: 4, span: 16 }">
          <a-checkbox v-model:checked="formState.remember">记住我</a-checkbox>
        </a-form-item>

        <a-form-item :wrapper-col="{ offset: 4, span: 16 }">
          <a-button type="primary" html-type="submit">登录</a-button>
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>

<script setup>
import { useRoute } from 'vue-router';
let $router = useRoute();
import { $login } from '../api/login';
import { reactive } from 'vue';
const formState = reactive({
  username: 'admin',
  password: '123321',
  remember: false,
});
// 登录方法
const onFinish = (values) => {
  $router.push('/layout');
  console.log(values);

  // let { username, password, remember } = values;
  // let ret = await $login({ username, password });
  // if (ret) {
  //   $router.push('/layout');
  // }
};
</script>

<style lang="less" scoped>
.login {
  width: 100vw;
  height: 100vh;
  // background: linear-gradient(top bottom, rgb(37, 37, 92), rgb(60, 60, 94));

  background-color: pink;
  display: flex;
  justify-content: center;
  align-items: center;
  .conent {
    width: 500px;
    padding: 20px;
    padding-bottom: 0;
    border: 1px solid #fff;
    border-radius: 5px;
  }
}
</style>
